<template>
  <div class="skillContent">
    <div class="thumb">
      <text class="thumbName">{{thumbName}}</text>
    </div>
    <div ref='rateContent' class="rightContent">
      <text class="name">{{name}}</text>
      <div style="background-color:#000000; height: 10px; border-radius:3px;
">
        <div style="background-color:#8ba5b4; height:10px; border-radius:3px;
" :style="{ width: rateWidth }"></div>
      </div>
    </div>
  </div>
</template>

<script>

const dom = weex.requireModule('dom');

export default {
  props: {
    thumbName:{default:'OC'},
    name:{default:'Objective-C'},
    rate:{default:0.5}
  },
  data: function () {
    return {
      rateWidth:'1px'
    }
  },

  beforeUpdate: function () {

  },

  updated: function () {

  },

  mounted: function () {
    //this.rateWidth = Math.floor(156 * this.rate) + 'px';

      const result = dom.getComponentRect(this.$refs.rateContent, (option) => {
      console.log(result);
      //this.rateWidth = Math.floor(option.size.width * this.rate) + 'px';
      this.rateWidth = Math.floor(135 * this.rate) + 'px';


    });
  }

}

</script>

<style scoped>

.skillContent {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.rightContent {
  flex: 1;
  flex-direction: column;
}

.thumb {
  border-width: 1px;
  border-color: #444444;
  background-color: #bbbdbc;
  width: 60px;
  height: 60px;
  margin-right: 5px;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
}

.thumbName {
  font-size: 25px;
  color: #000000;
  font-weight: bold;
}

.name {
  font-size: 22px;
  color: #000000;
  flex:1;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

</style>
